<template>
	<view>
		<!-- 头部 -->
		<view>
			<uni-nav-bar :border="false" left-icon="left" left-text="返回" title="修改个人资料" />
		</view>

		<!-- 内容部分 -->
		<view class="maxbox">
			<view class="tou">
				<text class="iconfont icon-geren"></text>头像
			</view>
			<!-- {{imagesUrls+imagesUrl}} -->
			<view class="aaa" @click="UpdataFile">
				<image :src="imagesUrl?imagesUrls+imagesUrl:'@/static/logo.png'" mode="" class="image"></image>
				<text class="iconfont icon-right-1-copy"></text>
			</view>
		</view>
		<view class="xian"></view>
		<!-- 内容部分 -->
		<view class="maxbox">
			<view class="tou">
				<text class="iconfont icon-nicheng"></text>昵称
			</view>
			<view class="aaa">
				<view class="w">
					<input type="text" v-model="form.name" placeholder="请填写昵称" />
				</view>
				<text class="iconfont icon-right-1-copy"></text>
			</view>
		</view>
		<view class="xian"></view>
		<!-- 内容部分 -->
		<view class="maxbox">
			<view class="tou">
				<text class="iconfont icon-gender"></text>性别
			</view>
			<view class="aaa">
				<picker @change="bindPickerChange" :value="index" :range="array" range-key="sex">
					<view class="pick">
						<view class="sexSons">
							<view class="uni-input">{{index!==''?array[index].sex:"请选择详细性别信息"}}</view>
						</view>
						<text class="iconfont icon-right-1-copy icon"></text>
					</view>
				</picker>
			</view>
		</view>
		<view class="xian"></view>
		<!-- 内容部分 -->
		<view class="maxbox">
			<view class="tou">
				<text class="iconfont icon-shouji"></text>手机
			</view>
			<view class="aaa">
				<view class="w">
					{{form.member.mobile}}
				</view>
				<text class="iconfont icon-right-1-copy"></text>
			</view>
		</view>
		<view class="baocun" @click="Save()">
			保存
		</view>
	</view>
</template>

<script>
	import {
		IMAGE_BASE_URL
	} from "../../config/index.js"
	import {updatemember} from "../../apis/index.js"
	export default {
		// 去除微信小程序生成多一层标签
		data() {
			return {
				imagesUrls: IMAGE_BASE_URL,
				imagesUrl: "",
				array: [{
						id: 0,
						sex: '保密'
					},
					{
						id: 1,
						sex: '男'
					},
					{
						id: 2,
						sex: '女'
					}
				],
				index: "",
				form:{
					
				},

			};
		},
		created() {
			let member = uni.getStorageSync("member")
			console.log(member);
			this.form.member = member
			this.imagesUrl = member.photo
			console.log(this.imagesUrl,1212);
		},
		methods: {
			async Save() {
				// console.log(this.form);
				if (!this.form.name) return this.$message.error("请填写昵称")
				if (this.index === "") return this.$message.error("请选择您的性别")
				let res = await updatemember(this.form)
				console.log("修改个人资料",res);
				uni.setStorageSync("UserInfo",res)
				this.$message.success("修改成功")
				uni.switchTab({
					url: "/pages/My/My"
				})
				
			},
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index = e.detail.value
				this.form.sex = this.array[e.detail.value].id
				// console.log(this.form.sex);
				// console.log(this.array);
			},
			UpdataFile() {
				uni.chooseImage({
					success: async (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						console.log(tempFilePaths);
						let res = await this.$common.upload(tempFilePaths[0])
						console.log(res, '单文件上传');
						// res.data.forEach((item)=>{
						// 	item.data = item.data?item.data:'../../static/logo.png'
						// })
						this.imagesUrl = res.data
						this.form.photo = this.imagesUrl
						
						console.log(this.imagesUrl);
					}
				});
			},
		}
	}
</script>

<style lang="less">
	page {
		background-color: #f6f4f5;
	}

	.maxbox {
		display: flex;
		justify-content: space-between;
		width: 100%;
		margin: 0 auto;
		height: 110rpx;
		background-color: #fff;
	}

	.tou {
		line-height: 110rpx;
		font-size: 25rpx;
		margin-left: 30rpx;
	}

	.tou .icon-geren {
		font-size: 24rpx;
		margin-right: 20rpx;
		color: #0080ff;

	}

	.icon-nicheng {
		font-size: 24rpx;
		margin-right: 20rpx;
		color: #0080ff;

	}

	.icon-gender {
		font-size: 24rpx;
		margin-right: 20rpx;
		color: #0080ff;
	}

	.icon-shouji {
		font-size: 24rpx;
		margin-right: 20rpx;
		color: #0080ff;
	}

	.aaa {
		display: flex;
		justify-content: end;
		margin-right: 55rpx;
		font-size: 24rpx;
		// background-color: pink;
		display: flex;
		width: 290rpx;
		// height: 400rpx;
		line-height: 110rpx;
	}

	.aaa .image {
		margin-top: 12rpx;
		width: 76rpx;
		height: 76rpx;
		border-radius: 50%;
		margin-left: 150rpx;
	}

	.aaa .icon-right-1-copy {
		margin-left: 20rpx;

	}

	.w input {
		text-align: right;
		// margin-top: 40rpx;
		height: 100%;
		width: 530rpx;
		font-size: 24rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.pick {
		display: flex;
	}

	.xian {
		height: 2rpx;
	}

	.baocun {
		margin-top: 65rpx;
		margin-left: 130rpx;
		margin-right: 130rpx;
		background-color: #1f8fff;
		text-align: center;
		border-radius: 50rpx;
		padding-top: 15rpx;
		padding-bottom: 15rpx;
		color: white;
	}
</style>